<template>
	<view>
		<form @submit="formSubmit">
			<view class="padding rowsb align-center bg-white solid-bottom" style="border-top: 20rpx solid #EEEEEE;">
				<view>
					会员姓名
				</view>
				<view class="text-gray">
					<input type="text" value="" placeholder="请输入会员姓名" name="username"
						style="font-size: 28rpx;text-align: right;" />
				</view>
			</view>
			<view class="padding rowsb align-center bg-white solid-bottom">
				<view>
					会员手机号
				</view>
				<view class="text-gray">
					<input type="number" maxlength="11" value="" name="userphone" placeholder="请输入手机号"
						style="font-size: 28rpx;text-align: right;" />
				</view>
			</view>
			<view class="padding rowsb align-center bg-white solid-bottom">
				<view>
					预约时间
				</view>
				<view class="text-gray flex">
					<picker mode="date" :value="date" start="2021-01-01" end="2080-09-01" @change="DateChange">
						<view class="picker">
							{{date || '请选择日期'}}
						</view>
					</picker>
					<!-- 		<picker @change="PickerChange" :value="index" :range="pickerList" class="margin-left"> 
						<view class="picker"> 
							{{index>-1?pickerList[index]:'请选择时间'}}
						</view>
					</picker> -->
				</view>
			</view>
			<view class="bg-white flex flex-wrap padding " v-if="timeTyep == 0">
				<view v-for="(item,index) in pickerList" class="bg-gray padding margin-xs radius "
					@click="pikerMen(index,item.itme1)" :class="{activeBg:index==nums}"
					style="width: 250rpx;text-align: center;">
					{{item.itme1}} -{{item.item2}}
				</view>
			</view>
			<view class="bg-white rows padding">
				<view class="margin-right">
					备注
				</view>
				<view>
					<textarea value="" placeholder="请输入" class="border" name="info" style="height: 200rpx;" />
				</view>
			</view>
			<view class="bg-white padding">
				<button form-type="submit">提交</button>
				<!-- appointCar -->
			</view>
		</form>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		jx_time,
		appointCar
	} from '../../../common/path.js'

	export default {
		data() {
			return {
				nums: 0,
				date: '',
				time: '',
				pickerList: [],
				index: -1,
				timeTyep: '', //预约事件
			}
		},
		onLoad() {
			this.jxTime() //获取选额时间
		},
		methods: {
			//选择
			pikerMen(index, event) {
				this.nums = index
				this.time = event
			},


			//可预约时间
			jxTime() {
				let data = {
					token: uni.getStorageSync('token')
				}
				this.$axios.axios('POST', jx_time, data)
					.then((res) => {
						if (res.status == 1) {
							console.log('[1]',res.data.type);
							this.timeTyep = res.data.type
							let array = Object.values(res.data)
							let array2 = array.map(item => {
								array2 = {
									itme1: item,
									item2: Number(item.substring(0, 2)) + 1 + ':00'
								}
								return array2
							})
							console.log('时间2', array2);
							this.pickerList = array2

						}
					})
			},

			//时间选择
			PickerChange(e) {
				this.jxTime()
				this.index = e.detail.value
				this.time = this.picker[e.detail.value]
				console.log('时间===>', this.time);
			},
			//提交成功

			// name="yy_time"
			formSubmit(e) {
				if (this.date == '') {
					this.$tools.showToast('请选择日期')
					return false
				}
				if (this.time == '' && this.timeTyep == 1) {
					this.$tools.showToast('请选择时间')
					return false
				}
				console.log('获取到的时间===>', e);
				if (this.$tools.fordataInfo(e.detail.value)) {
					if (this.timeTyep == '1') e.detail.value.yy_time = this.date
					else e.detail.value.yy_time = this.date + ' ' + this.time
					e.detail.value.uid = app.userInfo.id;

					let data = JSON.stringify(e.detail.value)
					console.log(data);
					this.$axios.axios('POST', appointCar, e.detail.value)
						.then(res => {
							if (res.status == 1) {
								this.$tools.showToast('成功')
								setTimeout(r => {
									this.$tools.navigateBack()
								}, 1000)
							} else {
								this.$tools.showToast(res.msg)
							}
						})

				}
			},
			// TimeChange(e) {
			// 	this.time = e.detail.value
			// },
			DateChange(e) {
				this.date = e.detail.value
				console.log(this.date);
			},
			//提交订单 
			appointCar() {
				let data = {
					// username:this.username,
					// userphone:this.userphone,
					// yy_time:this.date,
					// uid:app.userInfo.id,
					// info:this.content
				}
				this.$axios.axios('POST', appointCar, data)
					.then(res => {
						console.log(res);
					})
					.catch(err => {
						console.log(err);
					})
			},
			fordataInfo(data) {
				let show = true
				for (let key in data) {
					const value = data[key]
					// console.log(value)
					if (!value) {
						this.$tools.showToast('未填写完整');
						show = false;
						break;
					}
				}
				return show;
			},
		}

	}
</script>

<style>
	.activeBg {
		background-color: #F76E15;
		color: #FFFFFF;
	}
</style>
